import { View } from "@tarojs/components";
import { AbstractImage, Icon } from "@/components";
import { usePageDimensions } from "@/hooks/usePageDimensions";
import { UserShape } from "@/data/user/userTypes";
import { navigateTo } from "@/utils/navigation";
import { isLoggedIn } from "@/utils/isLoggedIn";
import { ModalTypes, useApplicationInfo } from "@/store/applicationDataContext";
import style from "./index.module.scss";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";

type UserOverviewProps = {
  userData: UserShape;
  backgroundImageUrl: string;
};

const C29UserOverview = ({
  userData,
  backgroundImageUrl,
}: UserOverviewProps) => {
  const { dispatch } = useApplicationInfo();

  const { heightExclNavbar } = usePageDimensions();

  const cartCount = userData.userInfo.shoppingCartsCount;
  const certificateCount = userData.userInfo.giftCardsCount;
  const likedCount = userData.userInfo.collectionCount;
  //const { course, exhibition, talk } = userData.userEvents;
  //const coursesCount = course.upcoming.length + course.past.length;
  const coursesCount = userData.userInfo.coursesCount;
  //const exhibitionCount = exhibition.upcoming.length + exhibition.past.length;
  //const talkCount = talk.upcoming.length + talk.past.length;
  const exhibitionCount = userData.userInfo.exhibitionsCount;
  const talkCount = userData.userInfo.talkCount;

  return (
    <View
      className={`
        ${style["user-overview-wrapper"]} 
      `}
      style={{
        height: heightExclNavbar,
      }}
    >
      <View className={style.background}>
        <AbstractImage
          className={style["background-image"]}
          src={backgroundImageUrl}
          type="none"
        />
      </View>
      <View
        className={style.content}
        style={{
          gridTemplateRows: `
            ${0.24 * heightExclNavbar}px
            ${0.24 * heightExclNavbar}px
            ${0.21 * heightExclNavbar}px 
            ${0.3 * heightExclNavbar}px`,
        }}
      >
        {/* Top section -> name and QR code */}
        <View className={style.welcome}>
          <View>
            <View
              className={`${style["welcome-title"]} ${style["small-title"]}`}
            >
              欢迎
            </View>
            <View
              className={style["name-wrapper"]}
              onClick={() => {
                sendAction(ActionNames.MyListPersonalClick);
                navigateTo("pages/user-details-overview/index");
              }}
            >
              <View className={style.name}>{userData.userInfo.nickName}</View>
              <View className={style["edit-button"]}>
                <Icon className={style["edit-icon"]} type="Edit" />
              </View>
            </View>
          </View>
          <View
            className={`${style["qr-button"]} ${
              isLoggedIn(userData.userInfo) ? "" : style["hidden"]
            }`}
            onClick={() => {
              sendAction(ActionNames.MyListCodeClick);
              dispatch({ type: "SHOW_MODAL", data: ModalTypes.QR });
            }}
          >
            <Icon className={style["qr-icon"]} type="QR" />
            <View className={`${style["qr-text"]} ${style["small-title"]}`}>
              会员码
            </View>
          </View>
        </View>

        {/* Collected items */}
        <View className={style["collected-items"]}>
          <View
            className={style["item"]}
            onClick={() => {
              sendAction(ActionNames.ShoppingCartClick);
              navigateTo("pages/cart/index");
            }}
          >
            <View className={style["item-icon-outline"]}>
              <Icon
                className={`${style["item-icon"]} ${style["cart"]}`}
                type="Cart"
              />
              {!!cartCount && (
                <View className={style["item-count"]}>{cartCount}</View>
              )}
            </View>
            <View className={`${style["item-text"]} ${style["small-title"]}`}>
              购物车
            </View>
          </View>

          <View
            className={style["item"]}
            onClick={() => {
              sendAction(ActionNames.MyListGiftCardClick);
              navigateTo("pages/user-gift-certificates/index");
            }}
          >
            <View className={style["item-icon-outline"]}>
              <Icon
                className={`${style["item-icon"]} ${style["gift"]}`}
                type="GiftCard"
              />
              {!!certificateCount && (
                <View className={style["item-count"]}>{certificateCount}</View>
              )}
            </View>
            <View className={`${style["item-text"]} ${style["small-title"]}`}>
              礼品卡
            </View>
          </View>

          <View
            className={style["item"]}
            onClick={() => {
              sendAction(ActionNames.MyListLikeClick);
              navigateTo("pages/user-liked-items/index");
            }}
          >
            <View className={style["item-icon-outline"]}>
              <Icon
                className={`${style["item-icon"]} ${style["heart"]}`}
                type="Favorite"
              />
              {!!likedCount && (
                <View className={style["item-count"]}>{likedCount}</View>
              )}
            </View>
            <View className={`${style["item-text"]} ${style["small-title"]}`}>
              我的收藏
            </View>
          </View>
        </View>

        {/* Events section */}
        <View className={style.events}>
          <View
            className={style["event-history-card"]}
            onClick={() => {
              sendAction(ActionNames.MyListContentClick, {
                [ActionKeys.ContentName]: "我的课程",
              });
              navigateTo("pages/user-event-history/index?eventType=course");
            }}
          >
            <View className={style["event-history-count"]}>
              <View className={style["number"]}>{coursesCount}</View>
              <View className={style["small-title"]}>节</View>
            </View>
            <View className={style["event-history-title"]}>我的课程</View>
          </View>
          <View
            className={style["event-history-card"]}
            onClick={() => {
              sendAction(ActionNames.MyListContentClick, {
                [ActionKeys.ContentName]: "我的讲座",
              });
              navigateTo("pages/user-event-history/index?eventType=talk");
            }}
          >
            <View className={style["event-history-count"]}>
              <View className={style["number"]}>{talkCount}</View>
              <View className={style["small-title"]}>节</View>
            </View>
            <View className={style["event-history-title"]}>我的讲座</View>
          </View>
          <View
            className={style["event-history-card"]}
            onClick={() => {
              sendAction(ActionNames.MyListContentClick, {
                [ActionKeys.ContentName]: "我的展览",
              });
              navigateTo("pages/user-event-history/index?eventType=exhibition");
            }}
          >
            <View className={style["event-history-count"]}>
              <View className={style["number"]}>{exhibitionCount}</View>
              <View className={style["small-title"]}>场</View>
            </View>
            <View className={style["event-history-title"]}>我的展览</View>
          </View>
        </View>

        {/* Bottom-screen links */}
        <View className={style["link-section"]}>
          <View
            className={style["order-listing"]}
            onClick={() => {
              sendAction(ActionNames.MyListContentClick, {
                [ActionKeys.ContentName]: "查看我的订单",
              });
              navigateTo("pages/user-order-listing/index");
            }}
          >
            <View className={style["order-listing-text"]}>查看我的订单</View>
            <Icon className={style["order-listing-arrow"]} type="ArrowBlue" />
          </View>
          <View className={style["link-bordered-section"]}>
            <View
              className={style["link-bordered-wrapper"]}
              onClick={() => {
                sendAction(ActionNames.MyListContentClick, {
                  [ActionKeys.ContentName]: "我的心愿单",
                });
                navigateTo("pages/user-waiting-list/index");
              }}
            >
              <View className={style["small-title"]}>我的心愿单</View>
              <Icon className={style["arrow"]} type="Arrow" />
            </View>
            <View
              className={style["link-bordered-wrapper"]}
              onClick={() => {
                sendAction(ActionNames.MyListContentClick, {
                  [ActionKeys.ContentName]: "常见问题",
                });
                navigateTo("pages/frequent-questions/index");
              }}
            >
              <View className={style["small-title"]}>常见问题</View>
              <Icon className={style["arrow"]} type="Arrow" />
            </View>
            <View
              className={style["link-bordered-wrapper"]}
              onClick={() => {
                sendAction(ActionNames.MyListContentClick, {
                  [ActionKeys.ContentName]: "隐私政策",
                });
                navigateTo("pages/privacy-policy/index");
              }}
            >
              <View className={style["small-title"]}>隐私政策</View>
              <Icon className={style["arrow"]} type="Arrow" />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default C29UserOverview;
